<template>
  <div class="outer">
    <div v-if="positionInformation.length === 0" class="otherpage">
      <p>暂无简历投递邀请</p>
      <p>您可以前往职位列表页面查看您对应的岗位。</p>
    </div>
    <div v-else class="container" v-for="(item, index) in positionInformation" :key="index" title="点击可查看详情">
      <div class="left">
        <img :src="item.logo" class="logo" />
        <div class="type">{{ item.industryType }}</div>
      </div>
      <div class="right">
        <div>
          <div class="above">
            <div class="company-name">{{ item.companyName }}</div>
            <div style="display: flex">
              <div class="positionName" style="width: 50%">
                {{ item.respPerson }}
              </div>
              <div class="positionName">{{ item.respPos }}</div>
            </div>
          </div>
          <div class="under">
            <div class="position">{{ item.positionName }}</div>
            <div class="place">
              {{ item.province }} <span v-if="item.province">-</span>
              {{ item.city }} <span v-if="item.street">-</span>
              {{ item.street }}
            </div>
            <div class="position">{{ item.experience }}</div>
            <div class="place">{{ item.salary }}</div>
          </div>
        </div>
        <div class="under">
          <div>
            <el-button plain round @click="toDetail(item.positionId)">查看详细</el-button>
            <!-- <el-link :underline="false"></el-link> -->
          </div>
          <div>
            <el-button plain round type="success" @click="deliver(item.id)">投递</el-button>
            <el-button plain round type="danger" @click="refuse(item.id)">拒绝</el-button>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; margin-left: 30%; width: 100%; ">
      <el-pagination v-model:current-page="currentPage" :hide-on-single-page="true" :page-size="9" :size="size"
        :background="true" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
    </div>


    <el-dialog v-model="dialogVisible" title="选择需要投递的简历" width="400" :before-close="handleClose">
      <center>
        <span>
          <div class="management-content" v-for="(item, index) in attachmentResume" :key="index"
            :class="{ 'selected': selectResumeIndex === index }" @click="selectResume(item.id, index)">
            <div>
              <img src="@/assets/img/ppt图标.png" alt="" style="width: 44px" />
            </div>
            <div style="
                width: 90%;
                margin-left: 5px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
              ">
              <div>
                <a href="#" style="width: 100px">简历.pdf</a>
              </div>
              <div style="font-size: 12px; color: #8d92a1">
                324.6KB 更新于2023-03-15 15:30
              </div>
            </div>
          </div>
        </span>
      </center>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel" style="padding: 5px;">取消</el-button>
          <el-button type="primary" @click="submit" style="padding: 5px;">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getJobByStudent, updateState } from "@/api/position.js";
import { getAttachment, modResumeSubmit } from "@/api/attachmentResume";
import { useRouter } from "vue-router";
import { ElMessage, ComponentSize } from "element-plus";

const router = useRouter();

const dialogVisible = ref(false);
const resumeId = ref();
const Id = ref();

//投递简历
const deliver = (id) => {
  dialogVisible.value = true;
  Id.value = id;
};
//拒绝投递简历
const refuse = (id) => {
  const res = updateState(id, 6);
  queryJobInformation();
};
// 获取附件简历
const attachmentResume = ref();
// const total = ref();
const pageNum = ref(1);
const pageSize = ref(3);
const queryAttachmentResume = async () => {
  const res = await getAttachment(pageNum.value, pageSize.value);
  console.log(res);
  attachmentResume.value = res.data.list;
  // total.value = res.data.list.length;
};
queryAttachmentResume();

const selectResumeIndex = ref();
const selectResume = async (id, index) => {
  selectResumeIndex.value = index;
  resumeId.value = id;
  console.log(id);
  console.log(index + "`````````" + selectResumeIndex.value);
};
const cancel = () => {
  dialogVisible.value = false;
  selectResumeIndex.value = null;
}

const submit = async () => {
  const res = await modResumeSubmit(Id.value, resumeId.value);
  if (res.code === 200) {
    ElMessage.success("投递成功");
    selectResumeIndex.value = null;
    dialogVisible.value = false;
    queryJobInformation();
  } else {
    ElMessage.error(res.msg);
    selectResumeIndex.value = null;
    dialogVisible.value = false
  }
};


//分页数据
const currentPage = ref(1);
const total = ref(0);
const size = ref<ComponentSize>("default");

onMounted(() => {
  queryJobInformation();
});
//获取职位收藏信息
const positionInformation = ref([]);
const queryJobInformation = async () => {
  const res = await getJobByStudent(currentPage.value, 9);
  if (res.code === 200) {
    positionInformation.value = res.data.list;
    total.value = res.data.total;
  } else {
    ElMessage.error("请检查网络问题，稍后重试");
  }
};


//分页变化
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  queryJobInformation();
};

//前往职位详细信息
const toDetail = (id) => {
  router.push(`/position/jobDetails?id=${id}`);
};
</script>

<style lang="scss" scoped>
.outer {
  width: 101%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container {
  display: flex;
  padding: 17px;
  border: 1px solid #ccc;
  width: 300px;
  /* background: rgba(255, 255, 255, 0.3);
     */
  background: #8CA9AA;
  backdrop-filter: blur(10px);
  border-top: 1px solid #ffffff50;
  border-left: 1px solid #ffffff50;
  border-radius: 15px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.container:hover {
  /* background: rgba(255, 255, 255, 0.5); */
  background: rgba(140, 169, 170, 0.5);
}

.left {
  width: 24%;
}

.logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 20px;
}

.type {
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: 10px;
  box-sizing: border-box;
  /* color: #cbcbcb;
   */
  color: #fff;
  writing-mode: vertical-rl;
  /* 从上到下，从右到左 */
  text-orientation: mixed;
  /* 保持中文字符的自然方向 */
  display: inline-block;
  /* 使 writing-mode 生效 */
}

.right {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.company-name {
  /* color: #fff;
   */
  color: #cbcbcb;
  width: 100%;
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.positionName {
  margin-bottom: 10px;
  box-sizing: border-box;
  /* color: #cbcbcb;
   */
  color: #fff;
  margin-top: 20px;
}

.under {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  color: #cbcbcb;
}

.position,
.place,
.tags,
.salary {
  width: 50%;
  margin: 10px 0;
  color: #fff;
}

.otherpage {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 16px;
  margin-top: 50px;
}

.el-link {
  color: #fff;
}

.el-link:hover {
  color: #409eff;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}

.management-content {
  width: 250px;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  background-color: rgb(247 247 247);
  display: flex;
  align-items: center;
  cursor: pointer;

  .but {
    padding: 0px 10px 0px 10px;
  }

  .pre:hover {
    color: #67c23a;
  }

  .del:hover {
    color: #f56c6c;
    /* 删除链接的颜色 */
  }
}

.management-content:hover {
  background-color: rgb(221 221 221);
}

.selected {
  background-color: rgb(221 221 221);
}

a {
  color: black;
  text-decoration: none;
}

</style>